<script>
import 'animate.css';
export default {
  name: "CaseAniMate",
  data(){
    return{
      msg:"Hello World!",
      flag:true,
      show:true,
      isshow:true

    }
  },
  methods:{
        animate(){
            this.flag=!this.flag
        },
    beforeEnter(el){
          el.style.transform='rotate(60deg)'
    },
    enter(el,done){
      el.style.background='black'
      done()
    },
    afterEnter(){
          this.isshow=!this.isshow
    }
  }
}
</script>

<template>
<div>
  <transition>
    <div v-if="flag" class="box">
      {{msg}}
    </div>
  </transition>
  <transition
                    @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter"
  >
    <div v-if="isshow" class="box">
    函数
    </div>
  </transition>
  <button @click="isshow=!isshow">函数</button>
  <button @click="animate">按钮</button>
  <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__rotateOutUpLeft"
      leave-active-class="animate__animated animate__zoomOutUp"
  >
    <div class="box" v-if="show">这是第三方库</div>

  </transition>
  <button @click="show=!show">
    按钮2
  </button>
</div>
</template>

<style scoped lang="less">
.box{
  width: 500px;
  height: 500px;
  margin: auto;
  background: #42b983;
}
.v-enter{
  border-radius: 50%;
  transform: rotate(0deg);
}
.v-enter-to{
  border-radius: 0%;
  transform: rotate(-360deg);
}
.v-enter-active{
  transition: all 3s;
}
.v-leave{
  transform: rotate(0deg);
}
.v-leave-to{
  transform: rotate(360deg);
  border-radius: 50%;
}
.v-leave-active{
  transition: all 3s;
}

</style>